<!-- 新版盲盒 -->
<template>
	<view class="page">
		<view class="header flex_r_between">
			<view class="flex_center">
				<view class="item flex_center" @click="list_modal = true">
					<image :src="$util.prefix('prize/icon_list.png')"></image>
					<text>记录</text>
				</view>
				
				<view class="w32">
					
				</view>
				
				<!-- <view class="item flex_center" @click="prize_modal = true">
					<image :src="$util.prefix('prize/icon_list.png')"></image>
					<text>平台记录</text>
				</view> -->
			</view>

			<view class="item flex_center" @click="rich_modal = true">
				<image :src="$util.prefix('prize/icon_rich.png')"></image>
				<text>说明</text>
			</view>
		</view>

		<view class="people_list flex_r_between">

			<view class="btn flex_r_around">
				<image :src="$util.prefix('prize/people_scroll_left.png')"></image>
			</view>

			<view class="scroll">
				<scroll-view scroll-x="true">
					<view class="people_content flex_center">
						<view class="item flex_c" v-for="(item,index) in people_list" :key="index"
							@click="onSelectPeople(item.userId)">
							<view class="avatar flex_r_around">
								<image class="user_avatar" :src="item.avatarUrl" mode="aspectFill"></image>
								<image :src="$util.prefix('prize/people_select.png')" class="select_image"
									v-show="to_uid == item.userId"></image>
							</view>
							<view class="nickname flex_r_around" :id="to_uid == item.userId ? 'select' : ''">
								<text class="hidden">{{ item.userName }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="btn flex_r_around">
				<image :src="$util.prefix('prize/people_scroll_right.png')"></image>
			</view>
		</view>

		<view class="banner flex_r_around">
			<view class="btn" @click="onPre">
				<image :src="$util.prefix('prize/banner_left.png')"></image>
			</view>
			<view class="banner_content">
				<swiper :autoplay="false" :duration="600" :circular="true" :current="current" @change="onchangeBanner">
					<swiper-item v-for="(item,index) in prizes" :key="index">
						<view class="item flex_c">
							<image :src="item.img" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="btn" @click="onNext">
				<image :src="$util.prefix('prize/banner_right.png')"></image>
			</view>
		</view>

		<view class="num flex_r_between">
			<view class="input flex_center">
				<view class="inp flex_center">
					<view class="inp_btn flex_r_around" @click="onCut">
						<image :src="$util.prefix('prize/cut.png')"></image>
					</view>

					<zb-popover placement="top" :options="actions" ref="Popover1" @handleClick="handleClick"
						@select="onSelectNum" class="item-popover">
						<view class="input">
							{{ num }}
						</view>
					</zb-popover>

					<view class="inp_btn flex_r_around" @click="onAdd">
						<image :src="$util.prefix('prize/add.png')"></image>
					</view>
				</view>
				<text>个/{{prizes.length ? prizes[current].singGoldPrice : '--'}} 金币</text>
			</view>
			<view class="btn flex_r_around" @click="toSend">
				<text>送出</text>
			</view>
		</view>

		<view class="blod flex_r_between">
			<view class="left flex_center">
				<image :src="$util.prefix('prize/blod.png')"></image>
				<text>{{ balance || 0 }}</text>
			</view>
			<view class="right flex_r_around" @click="$native.toRecharge()">
				<text>充值</text>
			</view>
		</view>

		<view class="loading flex_c" v-if="!loaded">
			<view style="height: 60rpx;"></view>
			<ProgressBar :Width="percent" Type="candy"></ProgressBar>
		</view>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="rich_modal" @close="rich_modal = false" mode="bottom" bgColor="transparent"
				:safeAreaInsetBottom="false">
				<rich @closeModal="closeModal" :prizes="prizes"></rich>
			</u-popup>
		</view>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="list_modal" @close="list_modal = false" mode="bottom" bgColor="transparent"
				:safeAreaInsetBottom="false">
				<list @closeModal="closeModal" :prizes="prizes"></list>
			</u-popup>
		</view>
		
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="prize_modal" @close="prize_modal = false" mode="bottom" bgColor="transparent"
				:safeAreaInsetBottom="false">
				<prizeLog @closeModal="closeModal" :prizes="prizes"></prizeLog>
			</u-popup>
		</view>

		<wLoading ref="loading"></wLoading>

	</view>
</template>

<script>
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	import wLoading from "@/components/w-loading/w-loading.vue";
	import rich from './components/rich.vue';
	import list from './components/list.vue';
	import prizeLog from './components/prizeLog.vue';
	export default {
		components: {
			ProgressBar,
			wLoading,
			rich,
			list,
			prizeLog,
		},
		data() {
			return {
				// 加载完成数量
				count: 0,
				// 预加载状态
				loaded: false,
				// 进度
				percent: 0,
				// 图片预加载 数组
				load_image: [
					'https://qiniu-cdn.maeiyun.com//h5static/prize/people_select.png',
					'https://qiniu-cdn.maeiyun.com//h5static/prize/people_scroll_right.png',
					'https://qiniu-cdn.maeiyun.com//h5static/prize/people_scroll_left.png',
					'https://qiniu-cdn.maeiyun.com//h5static/prize/icon_rich.png',
					'https://qiniu-cdn.maeiyun.com//h5static/prize/icon_list.png',
					'https://qiniu-cdn.maeiyun.com//h5static/prize/blod.png',
					'https://qiniu-cdn.maeiyun.com//h5static/prize/banner_right.png',
					'https://qiniu-cdn.maeiyun.com//h5static/prize/banner_left.png',
					'https://qiniu-cdn.maeiyun.com//h5static/prize/page.png',
					'https://qiniu-cdn.maeiyun.com//h5static/prize/cut.png',
					'https://qiniu-cdn.maeiyun.com//h5static/prize/add.png',
				],


				to_uid: 0,

				people_list: [],
				to_uid: 0,
				rid: 0,

				prizes: [],

				current: 0,

				num: 1,

				// 弹窗
				rich_modal: false,
				list_modal: false,
				prize_modal: false,

				singGoldPrice: 0,

				balance: 0,

				actions: [{
						text: '× 1',
						num: 1,
					},
					{
						text: '× 3',
						num: 3,
					},
					{
						text: '× 5',
						num: 5,
					},
					{
						text: '× 7',
						num: 7,
					},
					{
						text: '× 10',
						num: 10,
					},
				],
			}
		},
		methods: {
			preventHandler() {
				return
			},
			// 原生交互 获取直播间麦位成员信息
			getPeopleList(list) {
				var list = JSON.parse(list);
				list.forEach(element => {
					if (element.userId) {
						this.people_list.push(element);
					}
				})
				
				if(this.people_list.length){
					this.to_uid = this.people_list[0].userId;
				}
			},

			// 选择赠送礼物目标
			onSelectPeople(id) {
				this.to_uid = id;
			},

			getInit() {
				this.$post('/active.supGiftPrizeV3/getInitInfo').then(res => {
					this.prizes = res.data;
				});
			},

			preLoad() {
				for (let url of this.load_image) {
					let image = new Image();
					image.src = url;
					image.onload = () => {
						this.count++;
						// 加载完毕事件
						// 计算图片加载的百分数，绑定到percent变量
						let percentNum = Math.floor(this.count / this.load_image.length * 100);
						this.percent = percentNum;
					}
				}

			},

			onCut() {
				if (this.num <= 1) {
					return;
				}
				this.num--;
			},

			onAdd() {
				if (this.num >= 999) {
					return;
				}
				this.num++;
			},

			onPre() {
				if (this.current <= 0) {
					this.current = this.prizes.length - 1;
				} else {
					this.current--;
				}
			},

			onNext() {
				if (this.current >= this.prizes.length - 1) {
					this.current = 0;
				} else {
					this.current++;
				}
			},

			onchangeBanner(e) {
				this.current = e.detail.current;
			},

			closeModal() {
				this.rich_modal = false;
				this.list_modal = false;
				this.prize_modal = false;
			},

			// 获取金币余额
			getBlance() {
				this.$post('/jinbi/getBalance', {}, false).then(res => {
					this.balance = Number(res.data.balance).toFixed(0);
				});
			},

			toSend() {
				if (!this.to_uid) {
					return this.$util.msg('请先选择抽中的礼物送给哪位主播才能抽奖');
				}

				this.$refs.loading.open();
				this.$post('/active.supGiftPrizeV3/setPrize', {
					num: this.num,
					rid: this.rid,
					to_uid: this.to_uid,
					gid: this.gid,
					type: this.prizes[this.current].type,
				}, true, (res) => {
					this.flag = true;
					this.$refs.loading.close();
					if (res.code == 5) {
						this.$native.toJinBiRecharge();
					}
				}).then(res => {
					this.$util.msg('赠送成功');
					this.getBlance();
					this.$refs.loading.close();
					this.$native.sendGiftSuccess(res.data.prize_list, res.data.to_nickname, res.data.to_uid);
				});
			},
			
			handleClick(e){
				
			},
			
			onSelectNum(e){
				this.num = e.num;
			},

		},
		watch: {
			count: function(val, old) {
				if (val === this.load_image.length) { // 图片全部加载完成后跳转页面
					this.loaded = true;
				}
			},
		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.to_uid = option.to_uid || 0;
			this.rid = option.rid || 0;
			this.gid = option.gid || 0;

			this.preLoad();

			this.getBlance();

			window.getPeopleList = this.getPeopleList;
			this.$native.getPeopleList();

			this.getInit();

			// // 模拟数据
			// for (var i = 0; i < 100; i++) {
			// 	this.people_list.push({
			// 		"avatarUrl": 'http://qiniu-cdn.maeiyun.com/storage/xy/picture/20250206/20170124cf308758ad4402facd900531.jpg',
			// 		"userName": '主播' + i,
			// 		"userId": 44 + i
			// 	})
			// }
		}
	}
</script>

<style lang="less" scoped>
	body,
	page {
		background: linear-gradient(180deg, rgba(163, 137, 177, .0) 0%, #A389B1 20%);
	}

	.loading {
		position: fixed;
		z-index: 30;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FFF;
		padding-top: 20vh;
	}

	.page {
		background: url('https://qiniu-cdn.maeiyun.com//h5static/prize/page.png') 0 -20rpx no-repeat;
		background-size: cover;
		padding: 36rpx 0;
		background-color: linear-gradient(180deg, rgba(163, 137, 177, .0) 0%, #A389B1 20%);
		min-height: 100vh;
	}

	.header {
		padding: 0 48rpx;
		
		.w32 {
			width: 32rpx;
		}

		.item {
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}

			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	.people_list {
		overflow: hidden;
		height: 150rpx;
		margin: 40rpx 18rpx 0;

		.scroll {
			flex: 1;
			overflow: hidden;
		}

		.btn {
			width: 20rpx;
			height: 100%;

			image {
				width: 20rpx;
				height: 20rpx;
			}
		}

		.people_content {
			.item {
				width: 112rpx;
				flex-shrink: 0;
				margin-right: 16rpx;

				.avatar {
					position: relative;
					width: 72rpx;
					height: 72rpx;
					overflow: hidden;
					border-radius: 36rpx;

					.user_avatar {
						width: 72rpx;
						height: 72rpx;
					}

					.select_image {
						width: 72rpx;
						height: 72rpx;
						position: absolute;
						z-index: 2;
						top: 0;
						left: 0;
					}

				}

				.nickname {
					width: 112rpx;
					height: 40rpx;
					background: rgba(255, 255, 255, .5);
					border-radius: 18rpx;
					padding: 0 8rpx;
					margin-top: 10rpx;

					text {
						font-size: 24rpx;
						color: #FC4795;
					}
				}

				#select {
					background: #FD16AC;

					text {
						color: #FFF;
					}
				}
			}
		}
	}

	.banner {
		margin: 0 30rpx;

		.btn {
			width: 54rpx;
			height: 54rpx;

			image {
				width: 54rpx;
				height: 54rpx;
			}
		}

		.banner_content {
			width: 438rpx;
			height: 514rpx;

			swiper {
				width: 438rpx;
				height: 514rpx;
				border-radius: 60rpx;
				overflow: hidden;
			}

			.item {
				width: 438rpx;
				height: 514rpx;
				background: rgba(255, 255, 255, 0.5);
				justify-content: space-around;

				text {
					font-family: 'gongfu';
					font-size: 48rpx;
					color: #FF69CB;
					line-height: 58rpx;
					margin: 26rpx 0 28rpx;
				}

				image {
					width: 320rpx;
				}
			}
		}
	}

	.num {
		margin: 32rpx 140rpx 80rpx;
		
		/deep/ .zb-popover__action-text {
			padding: 0 !important;
		}
		
		.input {
			width: 320rpx;
			height: 64rpx;
			background: rgba(0, 0, 0, .75);
			border-radius: 14rpx;
			padding-left: 8rpx;
			
			.inp {
				.inp_btn {
					padding: 8rpx;

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}

				.input {
					width: 68rpx;
					height: 42rpx;
					border-radius: 10rpx;
					border: 2rpx solid #FFFFFF;
					color: #FFF;
					font-size: 24rpx;
					font-weight: normal;
					padding: 2rpx 6rpx;
					text-align: center;
				}
			}

			text {
				font-size: 24rpx;
				color: #FFFFFF;
				margin-left: 6rpx;
			}
		}

		.btn {
			width: 128rpx;
			height: 64rpx;
			background: linear-gradient(108deg, #EEC81A 0%, #EAB90D 9%, #D48E0B 35%, #EDC418 100%);
			box-shadow: inset 0rpx 2rpx 46rpx 0rpx rgba(255, 255, 255, 0.5);
			border-radius: 48rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.blod {
		width: 750rpx;
		height: 64rpx;
		background: rgba(255, 163, 217, 0.32);
		box-shadow: inset 0rpx -40rpx 80rpx 14rpx rgba(253, 22, 172, 0.32);
		padding: 0 32rpx;

		.left {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

		.right {
			width: 96rpx;
			height: 40rpx;
			background: #FFA3D9;
			box-shadow: inset 0rpx -40rpx 80rpx 14rpx #FD16AC;
			border-radius: 24rpx;

			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
</style>